<template>
  <div>
    <div class="register-user-email-input-warp">
      <el-row type="flex" align="middle">
        <el-col :span="1">
          <div>
            <span>
              <i class="fa fa-envelope-o"></i>
            </span>
          </div>
        </el-col>
        <el-col :span="23">
          <div>
            <input
              class="email-input"
              type="email"
              placeholder="请输入邮箱"
              v-model="inputEmail"
              @input="checkEmailInput"
              @focus="showEmailMessage"
            />
          </div>
        </el-col>
      </el-row>
      <div>
        <span
          v-if="emailMessageIsShow"
          class="verify-message"
          :class="{'success':emailIsReady,'error':!emailIsReady}"
        >
          <i :class="{'el-icon-success':emailIsReady,'el-icon-error':!emailIsReady}"></i>
          {{inputEmailMessage}}
        </span>
      </div>
    </div>
    <div class="register-user-password-input-warp">
      <el-row type="flex" align="middle">
        <el-col :span="1">
          <div>
            <span>
              <i class="fa fa-lock"></i>
            </span>
          </div>
        </el-col>
        <el-col :span="23">
          <div>
            <input
              class="password-input"
              type="password"
              placeholder="请输入密码"
              v-model="inputPassword"
              @input="checkPasswordInput"
              @focus="showPasswordMessage"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <span
        v-if="passwordMessageIsShow"
        class="verify-message"
        :class="{'success':passwordIsReady,'error':!passwordIsReady}"
      >
        <i :class="{'el-icon-success':passwordIsReady,'el-icon-error':!passwordIsReady}"></i>
        {{inputPasswordMessage}}
      </span>
    </div>
    <div class="register-password-again-input-warp">
      <el-row type="flex" align="middle">
        <el-col :span="1">
          <div>
            <span>
              <i class="fa fa-lock"></i>
            </span>
          </div>
        </el-col>
        <el-col :span="23">
          <div>
            <input
              class="password-input"
              type="password"
              placeholder="请再次输入密码"
              v-model="inputPasswordAgain"
              @input="checkAgainPasswordInput"
              @focus="showAgainPasswordMessage"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <span
        v-if="againPasswordMessageIsShow"
        class="verify-message"
        :class="{'success':againPasswordIsReady,'error':!againPasswordIsReady}"
      >
        <i :class="{'el-icon-success':againPasswordIsReady,'el-icon-error':!againPasswordIsReady}"></i>
        {{againPasswordMessage}}
      </span>
    </div>
    <div class="verifyCode-warp">
      <span>邮箱验证码：</span>
      <input type="text" class="verifyCode-input" v-model="inputVerifyCode"/>
      <span class="verifyCode-btn-warp"><button :class="{'verifyCode-btn':!verifyCodeBtnDisable,'disable-verifyCode-btn':verifyCodeBtnDisable}" :disabled="verifyCodeBtnDisable" @click="getEmailVerifyCode">{{verifyCodeBtnText}}</button></span>
      
    </div>
    <div class="register-btn-warp">
      <el-row type="flex">
        <el-col :span="24">
          <div>
            <el-button class="register-btn" @click="registerAcount">提交注册</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {request} from '../network/request';
export default {
  name: "register",
  data() {
    return {
      inputEmail: "",
      inputPassword: "",
      inputPasswordAgain: "",
      inputVerifyCode:"",
      verifyCode:"",
      verifyCodeBtnText:"获取验证码",
      verifyCodeBtnDisable:false,
      verifyCodeTimer:"",
      emailMessageIsShow: false,
      passwordMessageIsShow: false,
      againPasswordMessageIsShow: false,
      emailIsReady: false,
      passwordIsReady: false,
      againPasswordIsReady: false
    };
  },
  methods: {
    getEmailVerifyCode(){
      console.log("getVerifyCode");
      if(this.emailIsReady){
        request({
          url:"/user/emailExists/"+this.inputEmail
        }).then(res=>{
          if(res.data.exists){
            this.$alert('该邮箱已经存在', '警告', {
            confirmButtonText: '确定',
            callback: action => {
              
              }
            });
          }
          //发送邮件并设置60秒计时
          else{
            //设置倒计时
            let _that=this;
            let time=60;
            this.verifyCodeBtnDisable=true;
            this.verifyCodeBtnText="60s";
            this.verifyCodeTimer=setInterval(()=>{
              time--;
              _that.verifyCodeBtnText=time+"s";
              if(time<=0){
                _that.verifyCodeBtnDisable=false;
                _that.verifyCodeBtnText="获取验证码";
                clearInterval(_that.verifyCodeTimer);
              }
            },1000);
            //发送邮件
            request({
              url:"/user/emailVerifyCode/"+this.inputEmail
            }).then(res=>{
              if(res.data.status==="ok"){
                this.verifyCode=res.data.code;
              }
            }).catch(err=>{
              console.log(err);
            })
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    registerAcount(){
      if(this.emailIsReady&&this.passwordIsReady&&this.againPasswordIsReady){
        if(this.inputVerifyCode===this.verifyCode&&this.inputVerifyCode.trim()!=""){
          request({
          url:"/user/registerAcount",
          method:"post",
          data:{
            userEmail:this.inputEmail,
            password:this.inputPassword
          }
        }).then(res=>{
          console.log(res);
          if(res.data.status==="ok"){
            //把验证码清空下
            this.verifyCode="";
            this.$message({
              message: '恭喜，注册成功',
              type: 'success'
            });
            this.$emit("registerCompleted");
          }else{
            this.$message.error('邮箱账号已经存在,请重新输入一个');
          }
        }).catch(err=>{
          console.log(err);
          this.$message.error('出错了，请稍后再试');
        })
        }else{
          this.$message.error('验证码错误');
        }
      }
    },
    showEmailMessage() {
      this.emailMessageIsShow = true;
    },
    showPasswordMessage() {
      this.passwordMessageIsShow = true;
    },
    showAgainPasswordMessage() {
      this.againPasswordMessageIsShow = true;
    },
    checkEmailInput() {
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //验证邮箱的正则表达式
      if (this.inputEmail.trim() != "" && regEmail.test(this.inputEmail)) {
        this.emailIsReady = true;
      } else {
        this.emailIsReady = false;
      }
    },
    checkPasswordInput() {
      if (this.inputPassword.trim() != "") {
        this.passwordIsReady = true;
      } else {
        this.passwordIsReady = false;
      }
    },
    checkAgainPasswordInput() {
      if (this.inputPassword == this.inputPasswordAgain) {
        this.againPasswordIsReady = true;
      } else {
        this.againPasswordIsReady = false;
      }
    }
  },
  computed: {
    inputEmailMessage() {
      return this.emailIsReady ? "格式正确" : "输入的内容不符合邮箱规范";
    },
    inputPasswordMessage() {
      return this.passwordIsReady ? "" : "密码不能为空";
    },
    againPasswordMessage() {
      return this.againPasswordIsReady ? "" : "两次输入的密码不一致";
    }
  },
  beforeDestroy(){
      if(this.verifyCodeTimer){
        clearInterval(this.verifyCodeTimer);
      }
  }
};
</script>

<style>
.register-user-email-input-warp,
.register-user-password-input-warp,
.register-password-again-input-warp,
.register-btn-warp,
.verifyCode-warp {
  padding-top: 20px;
}
.register-btn {
  width: 100%;
  border-color: #ff69b4;
  color: #ff69b4;
}
.register-btn:hover,
.register-btn:focus {
  background-color: #ff69b4;
  color: #fff;
}
.success {
  color: green;
}
.error {
  color: red;
}
.email-input,
.password-input {
  border: none;
  font-size: 16px;
  width: 100%;
  height: 30px;
  border-bottom: 2px solid #ccc;
  transition: all 0.3s;
}
.email-input:focus,
.password-input:focus {
  border-bottom: 2px solid #ff69b4;
  outline: none;
}
.verifyCode-btn-warp {
  padding: 0 10px;
}
.verifyCode-btn {
  width: 200px;
  border: 1px solid #ff69b4;
  outline: none;
  color: #ff69b4;
  background-color: white;
  height: 25px;
  border-radius: 5px;
  transition: all 0.3s;
}
.verifyCode-btn:hover {
  background-color: #ff69b4;
  color: white;
}
.verifyCode-input {
  outline: none;
  height: 25px;
}
.disable-verifyCode-btn {
  width: 200px;
	outline: none;
	color: gray;
	background-color: #CCCCCC;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	height: 25px;
}
</style>